<template>
  <div>
    <van-nav-bar title="用户注册" left-arrow @click-left="onClickLeft" />
    <div id="r">
      <img class="pic" src="image/4.png" alt="" />
      <p>请选择头像和昵称</p>
      <div class="inf">
        <van-uploader
          preview-size="40px"
          :max-count="1"       
          v-model="file"
          :after-read="afterRead"
        />
        <input
          v-model="uname"
          type="text"
          placeholder="请填写个人昵称"
          @blur="checkName"
        />
      </div>
      <p>请填写以下信息</p>
      <div class="inf">
        手机号<input
          v-model="phone"
          type="text"
          placeholder="请填写手机号"
          @blur="checkPhone"
        />
      </div>
      <div class="inf">
        密码<input
          v-model="pwd"
          type="password"
          placeholder="请填写6位以上密码"
          @blur="checkPwd"
        />
      </div>
      <div class="inf">
        姓名<input v-model="tname" type="text" placeholder="请填写姓名" />
      </div>
      <div class="inf">
        <p>生日</p>
        <span @click="showPopup">{{ selectTime }}</span>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <van-datetime-picker
            type="date"
            title="请选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm"
            @cancel="cancel"
            :formatter="formatter"
          />
        </van-popup>
      </div>
      <div class="rad">
        <van-checkbox
          class="check"
          v-model="agree"
          checked-color="#aab84a"
          icon-size="15px"
          >你已阅读并同意<a href="">《微信支付用户授权协议》</a>和<a href=""
            >《会员守则》</a
          ></van-checkbox
        >
      </div>
      <button @click="btn" :disabled="!agree" :class="{ disabled: !agree }">
        开通
      </button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uname: "",
      phone: "",
      pwd: "",
      tname: "",
      file: [],
      agree: false,
      value: "",
      selectTime: "请选择年月日",
      show: false,
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2022, 0, 1),
    };
  },
  methods: {   
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

      if (file.file.type !== "image/jpeg" && file.file.type !== "image/png") {
        this.$toast.fail("请上传 jpg、jpeg,png 格式图片");
        return false;
      }
      let files=file.content  
      let imgtype = file.file.name.split(".", 2)[1];
     
      this.axios.post('/upavatar', `data=${files}&imgtype=${imgtype}`).then((res) => {
          //如果传入的响应状态码为200，则成功将文件发送给后台
          if (res.data.status === 200) {
            console.log(res);        
          } else {           
            console.log(res.data.msg); //这块是请求失败后台给返回的相应的数据
          }
        });
    },
    formatter(type, value) {
      if (type === "year") {
        this.value1 = value; // 可以拿到当前点击的数值
        return `${value}年`;
      } else if (type === "month") {
        this.value2 = value;
        return `${value}月`;
      }
      this.value3 = value;
      return `${value}日`;
    },
    showPopup() {
      this.show = true;
    },
    confirm() {
      var selectTime = `${this.value1}年${this.value2}月${this.value3}日`;
      console.log(selectTime);
      this.selectTime = selectTime;
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    onClickLeft() {
      this.$router.push("me");
    },
    /*验证用户名*/
    checkName() {
      let exp = /^[A-Za-z0-9_\u4e00-\u9fa5]{4,16}$/;
      if (exp.test(this.uname)) {
        // 验证成功
        return true;
      } else {
        // 验证失败
        Toast("请输入正确的用户名");
      }
    },
    /*验证密码*/
    checkPwd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwd)) {
        return true;
      } else {
        Toast("密码格式不正确");
      }
    },
    /*验证手机号*/
    checkPhone() {
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.phone)) {
        return true;
      } else {
        Toast("手机号格式不正确");
      }
    },
    btn() {
      if (this.checkName() && this.checkPwd() && this.checkPhone()) {
        const { uname, pwd, phone, tname, selectTime } = this;
        console.log(this);
        console.log(uname, pwd, phone, tname, selectTime);

        const url = "/register";
        const params = `uname=${this.uname}&pwd=${this.pwd}&phone=${this.phone}&selectTime=${this.selectTime}&tname=${this.tname}`;

        this.axios.post(url, params).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            //提交vuex，更新用户信息
            this.$store.commit("updateUname", this.uname);
            Toast("注册成功");
            this.$router.push("login");
          } else {
            Toast("注册失败，请重新填写信息");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
#r .inf {
  height: 6vh;
  align-items: center;
  padding: 0 2vh;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
  margin-left: 2vh;
  margin-right: 2vh;
  font-size: 14px;
}
#r > p {
  border-bottom: 1px solid gainsboro;
  font-size: 14px;
  display: flex;
  justify-content: start;
  margin-left: 3vh;
  padding: 3vh 0 1vh 0;
}
.pic {
  width: 50vh;
  height: 18vh;
  margin-top: 2vh;
}
.inf img {
  border-radius: 50%;
  width: 5vh;
  height: 5vh;
  margin-left: 1vh;
  margin-top: 0.5vh;
  margin-right: 2vh;
}
.inf input {
  width: 80%;
  height: 50%;
  margin-top: 1vh;
  border: 0;
}
.rad {
  margin: 9vh 5vh 2vh;
  position: relative;
}
.rad .check {
  font-size: 13px;
}
.disabled {
  background: #e0e0e0;
  color: gray;
}
button {
  background-color: #a7d500;
  padding: 1vh 8vh;
  border: 0;
  border-radius: 5px;
}
::v-deep .van-uploader {
  margin-top: 1vh;
}
</style>